<template>
	<view class="container">
		
		<!-- 顶部导航 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#536CFC" status-bar title="通讯录" left-icon="left" />
		
		<!-- 查询条件 -->
		<uni-search-bar radius="100" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" />
		
		<!-- 单位同事  讨论组 -->
		<view class="address-class">
			<view class="address-class-item" 
				  :style="classType === 'dwts' ? 'color: #536CFC' : 'color: #A9B1B0'"
				  @click="classType = 'dwts'"
				  >
				<view><text class="iconfont icon-danwei address-class-item-icon"></text></view>
				<view class="address-class-item-text">单位同事</view>
			</view>
			<view class="address-class-item" 
				  :style="classType === 'tlx' ? 'color: #536CFC' : 'color: #A9B1B0'"
				   @click="classType = 'tlx'"
				  >
				<view><text class="iconfont icon-taolunzu address-class-item-icon"></text></view>
				<view class="address-class-item-text">讨论组</view>
			</view>
		</view>
		
		<!-- 单位列表 -->
		<view class="address-dept-list">
			<view style="height: 80rpx;line-height: 70rpx;">
				<text class="iconfont icon-icon-test" style="color: #536CFC;font-size: 32rpx;"></text>
				<text style="color: #A9B1B0;font-size: 30rpx;margin-left: 10rpx;">住建厅(369)</text>
			</view>
			<uni-list>
				<uni-list-item title="列表文字" />
				<uni-list-item title="列表文字" rightText="右侧文字" />
				<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
			</uni-list>
		</view>
	
		
		
	</view>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	
	const classType = ref("dwts")
	
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}
	.address-class {
		height: 150rpx;
		border-radius: 20rpx;
		margin: 0rpx 20rpx;
		margin-right: 20rpx;
		display: flex;
		flex-direction: row;
		background-color: white;
	}
	.address-class-item {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.address-class-item:hover {
		color: #536CFC;
	}
	.address-class-item-icon {
		font-size: 40rpx;
	}
	.address-class-item-text {
		font-size: 20rpx;
	}
	
	.address-dept-list {
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
		background-color: white;
		padding: 20rpx;
	}
	
	/* 设置当前的搜索框背景颜色 */
	/deep/ .uni-searchbar__box {
		background-color: white !important;
	}
</style>
